<template>
  <Tinymce v-bind="bindProps" @change="onChange" />
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';

import { Tinymce } from '@/components/tinymce';

export default defineComponent({
  name: 'TyEditor',
  // 不将 attrs 的属性绑定到 html 标签上
  inheritAttrs: false,
  components: { Tinymce },
  props: {
    value: [String],
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['change', 'update:value'],
  setup(props, { emit, attrs }) {
    // 合并 props 和 attrs
    const bindProps: any = computed(() => Object.assign({}, props, attrs));

    // value change 事件
    function onChange(value) {
      emit('change', value);
      emit('update:value', value);
    }

    return {
      bindProps,
      onChange,
    };
  },
});
</script>

<style lang="less" scoped></style>
